import * as React from "react";
import Background from "../../components/Background.tsx";
import {Stack, Button, Grid, TextField, Typography} from "@mui/material";
import {useState} from "react";
import {useRegister} from "../../hooks/useRegister.ts";

const Register: React.FC = () => {

    const [id, setId] = useState('');
    const [name, setName] = useState('');
    const [phoneNumber, setPhoneNumber] = useState('');
    const [password, setPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
    const {register, isLoading, error} = useRegister();

    const [registerText, setRegisterText] = useState('注册');
    const [textColor, setTextColor] = useState('initial');

    const handleRegister = async () => {
        // 判断两次密码是否一致
        if (password !== confirmPassword) {
            setRegisterText('密码不一致');
            setTextColor('#f26868');
            setTimeout(() => {
                setRegisterText('注册');
                setTextColor('initial');
            }, 3000);
            return;
        }
        await register(id, name, phoneNumber, password);
        if (error) {
            setRegisterText('注册失败');
            setTextColor('#f26868');
            setTimeout(() => {
                setRegisterText('注册');
                setTextColor('initial');
            }, 3000);
        }
    }

    return (
        <>
            <Background/>
            <div style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0}}>
                <Grid container justifyContent="center" alignItems="center" spacing={2}
                      style={{minHeight: '100vh'}}>
                    <Grid item xs={8}>
                        <div style={{
                            padding: '5%',
                            paddingBottom: '8%',
                            border: '1px solid #ccc',
                            borderRadius: '25px',
                            backgroundColor: 'rgba(255, 255, 255, 0.8)',
                            boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.2)',
                        }}>
                            <Stack direction="row" justifyContent="space-between" alignItems="center"
                                   sx={{marginTop: 4, marginBottom: 4}}>

                                {/*注册文字*/}
                                <Typography variant="h4" sx={{
                                    color: textColor,
                                    transition: 'color 0.6s ease'
                                }}>
                                    {registerText}
                                </Typography>
                                <img src="/assets/icon.png" alt="Logo" width="6%"/>
                            </Stack>

                            {/*姓名输入框*/}
                            <TextField
                                required
                                fullWidth
                                label="请输入您的姓名"
                                variant="standard"
                                value={name}
                                onChange={(e) => setName(e.target.value)}
                                sx={{marginBottom: 3}}
                            />

                            {/*工号输入框*/}
                            <TextField
                                required
                                fullWidth
                                label="请输入您的工号"
                                variant="standard"
                                value={id}
                                onChange={(e) => setId(e.target.value)}
                                sx={{marginBottom: 3}}
                            />

                            {/*电话号码输入框*/}
                            <TextField
                                required
                                fullWidth
                                label="请输入您的电话号码"
                                variant="standard"
                                value={phoneNumber}
                                onChange={(e) => setPhoneNumber(e.target.value)}
                                sx={{marginBottom: 3}}
                            />

                            {/*密码输入框*/}
                            <TextField
                                required
                                fullWidth
                                label="请设置您的密码"
                                variant="standard"
                                type="password"
                                autoComplete="current-password"
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                                sx={{marginBottom: 3}}
                            />

                            {/*确认密码输入框*/}
                            <TextField
                                required
                                fullWidth
                                label="请再次设置您的密码"
                                variant="standard"
                                type="password"
                                autoComplete="current-password"
                                value={confirmPassword}
                                onChange={(e) => setConfirmPassword(e.target.value)}
                                sx={{marginBottom: 3}}
                            />

                            {/*注册按钮*/}
                            <Button type="submit" fullWidth variant="contained" size="large"
                                    color="primary"
                                    onClick={handleRegister}
                                    sx={{
                                        marginTop: 2,
                                        backgroundColor: '#21c491',
                                        '&:hover': {backgroundColor: '#1eb384'}
                                    }}>
                                {isLoading ? 'Loading...' : 'REGISTER'}
                            </Button>
                        </div>
                    </Grid>
                </Grid>
            </div>
        </>
    );
};

export default Register;
